<template>
  <div class="orderDetails">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单详情</span>
        <i class="el-icon-back" @click="$router.push('/order')"></i>
      </div>

      <!--      订单信息-->
      <el-table :data="orderInfo" style="width: 100%">
        <el-table-column prop="orderId" label="订单号" />
        <el-table-column
          prop="num"
          label="商品数量"
          width="100"
          align="center"
        />
        <el-table-column
          prop="pickUpNum"
          label="取餐号"
          width="100"
          align="center"
        />
        <el-table-column prop="price" label="总价" width="120" align="center" />
        <el-table-column
          prop="tableNum"
          label="桌号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="150"
          align="center"
        />
        <el-table-column label="状态" width="130" align="center">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.status == 0">进行中</el-tag>
            <el-tag type="success" v-else>已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="250"
          show-overflow-tooltip
        />
      </el-table>

      <el-divider><i class="el-icon-tableware"></i></el-divider>

      <!--      商品信息-->
      <el-table :data="goods" style="width: 100%">
        <el-table-column prop="num" label="商品图" width="200" align="left">
          <template slot-scope="scope">
            <img :src="BASE_URL + scope.row.thumb" alt="加载失败" />
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="商品名称"
          align="left"
          class-name="title"
        />
        <el-table-column prop="num" label="数量" width="300" align="center" />
        <el-table-column prop="price" label="单价" width="300" align="center" />
      </el-table>

      <div class="btnBox" v-if="orderInfo[0].status === 0">
        <el-button type="success" @click="completeOrder">完成订单</el-button>
        <el-button type="danger" @click="removeOrder">取消订单</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderDetails, completeOrder, removeOrder } from "../../api/api";
import { BASE_URL } from "../../settings";

export default {
  name: "order_details",
  data() {
    return {
      BASE_URL,
      orderInfo: [{}], //订单信息
      goods: [], //商品信息
      id: "", //订单id
    };
  },
  methods: {
    //获取订单信息
    async getInfo() {
      const res = await getOrderDetails({ id: this.id });
      this.orderInfo = [res.data];
      this.goods = res.data.menuItem;
    },
    //完成订单
    completeOrder() {
      this.$confirm("确定完成订单么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await completeOrder({ id: this.id });
          this.$message.success(res.msg);
          this.$router.push("/order");
        })
        .catch(() => this.$message.info("取消"));
    },
    //取消订单
    removeOrder() {
      this.$confirm("确定取消订单么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await removeOrder({ id: this.id });
          this.$message.success(res.msg);
          this.$router.push("/order");
        })
        .catch(() => this.$message.info("取消"));
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getInfo();
  },
  watch: {
    "$route.query.id"() {
      this.id = this.$route.query.id;
      this.getInfo();
    },
  },
};
</script>

<style scoped lang="scss">
img {
  width: 50%;
}

.btnBox {
  margin-top: 20px;
}

.el-icon-back {
  float: right;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}
</style>
